<script lang="ts" setup>
const searchText = ref('搜索')
const searchValue = ref('')
function search(e) {
  searchText.value = '搜索'
  console.log('searchValue', searchValue, e)
}

function focus() {
  searchText.value = '取消'
}

function serachTextBtn() {
  if (searchText.value === '取消') {
    searchText.value = '搜索'
    searchValue.value = ''
  }
  else {
    // 执行搜索
  }
}

const result = reactive(
  [
    // {
    //   id: 1,
    //   company: '江西好再来汽车贸易有限公司',
    //   address: '江西',
    // },
    // {
    //   id: 2,
    //   company: '江西好再来汽车贸易有限公司',
    //   address: '江西',
    // },

  ],
)
</script>

<template>
  <view class="page">
    <uni-nav-bar
      dark :fixed="true" background-color="#ffffff" status-bar title="选择下游客户" color="##393D40"
      left-icon="left" @clickLeft="() => {
        uni.navigateBack({
          delta: 1,
        })
      }"
    />

    <view class="mx-[20rpx] mt-[24rpx]  flex items-center">
      <!-- 搜索框 -->
      <view class="flex h-[88rpx] flex-1 items-center rounded-[16rpx] bg-[#F8F8F8] px-[20rpx] py-[16rpx]">
        <img src="../../../static/search.png" class="  iconfont mr-[12rpx] size-[28.97rpx] text-[#B0B4B9]">
        <input
          v-model="searchValue" class="flex-1 text-[28rpx] " placeholder="输入关键词搜索下游客户"
          placeholder-class="text-[#B0B4B9]" @focus="focus" @blur="search" @input="search"
        >
      </view>
      <!-- 搜索按钮 -->
      <text class="m-[24rpx] text-[34rpx] font-medium text-[#393D40]" @click="serachTextBtn">
        {{ searchText
        }}
      </text>
    </view>

    <view class="mx-[20rpx]  mt-[32rpx] flex text-[28rpx]">
      <view class=" mr-[24rpx] text-[#919BA1]">
        搜索结果
      </view>
      <view class="text-[#E80000] ">
        填写的企业名称越全搜索越精准
      </view>
    </view>

    <view
      v-for="item in result" :key="item.id"
      class="flex h-[178rpx] flex-col justify-evenly border-b border-[#EEEEEE] px-[20rpx] text-[28rpx]"
    >
      <view>{{ item.company }}</view>
      <view class="text-[#919BA1]">
        {{ item.address }}
      </view>
    </view>
    <view v-if="result.length <= 0">
      <img
        src="../../../static/thumbnail.png" class="ml-[176] mr-[174rpx] size-[400rpx]"
      >
    </view>
  </view>
</template>

<style lang="scss" scoped>
.iconfont {
  font-family: 'iconfont' !important;
}

.page {
  background-color: #ffffff !important;
}
</style>
